<template>
    <div id="categorylist">
        <div class="head">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <van-tabs v-model="active" class="content">
            <van-tab :title="item.name" :name="item.name" v-for="item in list" :key="item.id">
                <div class="info">
                    <p>{{item.name}}</p>
                    <p>{{item.front_desc}}</p>
                </div>
                <div class="list" v-if="item.goodslist!=0">
                    <div
                        class="item"
                        v-for="(item,index) in item.goodslist"
                        :key="index"
                        @click="goodsDetail(item.id)"
                    >
                        <img :src="item.list_pic_url" alt />
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.retail_price}}</p>
                    </div>
                </div>
                <div class="none" v-else>数据库暂无数据...</div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import { categoryNav, goodsList } from "@/api/category/categorylist";
export default {
    data() {
        return {
            active: 0,
            list: [],
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        getList: async function (cid) {
            let currentList = await goodsList({ categoryId: cid });
            // console.log(currentList.data);
            return currentList.data;
        },
        goodsDetail(id) {
            console.log(id);
            this.$router.push({
                path: "/pages/goods?id=" + id,
            });
        },
    },
    async created() {
        let id = this.$route.query.id;
        categoryNav({
            id: id,
        }).then((res) => {
            console.log(res);
            this.list = res.navData;
            this.active = res.currentNav.name;
            console.log(this.list);
            this.list.forEach(async (item, index) => {
                console.log(item, index);
                item.goodslist = await this.getList(item.id);
                console.log(item.goodslist);
                this.$forceUpdate(); //强制渲染
            });
        });
    },
};
</script>
<style lang="scss" scoped>
#categorylist {
    border-top: 1px solid transparent;
    background: #f4f4f4;
    font-size: 0.32rem;
    height:100vh
}
.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.content {
    padding-top: 1.333333rem;
    .info {
        text-align: center;
        background: #fff;
        padding: 0.4rem;
        margin-top: 0.26667rem;
        margin-bottom: 0.06667rem;
        :first-child {
            margin-bottom: 0.24rem;
            font-size: 0.4rem;
            color: #333;
        }
        :nth-child(2) {
            display: block;
            height: 0.32rem;
            font-size: 0.32rem;
            color: #999;
        }
    }
    .list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
            width: 4.96667rem;
            margin-bottom: 0.06667rem;
            text-align: center;
            background: #fff;
            padding: 0.2rem 0;
            img {
                display: block;
                width: 4.02667rem;
                height: 4.02667rem;
                margin: 0 auto;
            }
            .name {
                margin: 0.2rem 0 0.29333rem 0;
                text-align: center;
                padding: 0 0.26667rem;
                font-size: 0.32rem;
            }
            .price {
                text-align: center;
                font-size: 0.4rem;
                color: #b4282d;
            }
        }
    }
    .none {
        text-align: center;
        margin-top: 1.33333rem;
        color: #999;
    }
}
</style>